





<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">菜单管理</h1>
</div>
<div class="wrapper-md">


  <div class="panel panel-default">
    <div class="panel-heading">
      菜单管理
    </div>
<div >






  <div  ng-controller="dataTablesCtrl">
   <div class="row">

 <div class="col-sm-12" >
 <div class="panel-heading">

<a ui-sref="app.menuInfo.menuInfoEdit"><button class="btn btn-default btn-sm "><i class="fa fa-plus fa-lg"></i>&nbsp; 新增</button></a>

<a href="javascript:void(0);" ng-click="goEdit();" ><button class="btn btn-default btn-sm "><i class="fa fa-edit fa-lg"></i>&nbsp; 编辑</button></a>

<a href="javascript:void(0);" ng-click="goRemove();" ><button class="btn btn-default btn-sm "><i class="fa fa-trash-o fa-lg"></i>&nbsp; 删除</button></a>

<!--隐藏域-->
<input type="hidden" id ="optIds" name="optIds">


</div>
 </div>


 </div>
    



<!--
<input type="button" value="关闭所有节点" onclick="expandAll('N')">
  <input type="button" value="展开所有节点" onclick="expandAll('Y')">
  <input type="button" value="取得当前行的数据" onclick="selectedItem()"><br>
  当前选中的行：<input type="text" id="currentRow" size="110">
-->
  <div id="div1"></div>

  <script  type="text/javascript">

   var menuTopUrl = API_URL+"menu_info?query=delflag:0,FatherId:0&sortby=MenuDisplayOrder&order=asc&number="+Math.random();

      var topData = MenuInfo_AJAX(menuTopUrl);

      function MenuInfo_AJAX(url){
      var response;
       $.ajax( {  
                  async : false, //是否异步  
                  cache : false, //是否使用缓存  
                  type : 'get', //请求方式,post  
                  dataType : "json", //数据传输格式  
                  url : url, //请求链接  
                  error : function() {  
                      console.log('亲，网络有点不给力呀！');  
                  },  
                  success : function(data) { 
                    response = data;

                    for(var i =0;i<response.length;i++){
                      var childrenUrl = API_URL+"menu_info?query=delflag:0,FatherId:"+response[i].Id+"&sortby=MenuDisplayOrder&order=asc";
                      response[i].children = MY_ASYNC_AJAX(childrenUrl);
                    }



                  }  
             }); 
       return response;
}




    var config = {
      id: "tg1",
      width: "100%",
      renderTo: "div1",
      headerAlign: "left",
      headerHeight: "30",
      dataAlign: "left",
      indentation: "20",
      folderOpenIcon: "vendor/jquery/TreeGrid/images/folderOpen.gif",
      folderCloseIcon: "vendor/jquery/TreeGrid/images/folderClose.gif",
      defaultLeafIcon: "vendor/jquery/TreeGrid/images/defaultLeaf.gif",
      hoverRowBackground: "false",
      folderColumnIndex: "1",
      itemClick: "itemClickEvent",
      columns:[
        {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},
        {headerText: "菜单名称", dataField: "MenuName", headerAlign: "center", handler: "customOrgName", width: "100"},
        {headerText: "菜单地址", dataField: "MenuUrl", headerAlign: "center", dataAlign: "center", width: "100"},
        {headerText: "图标", dataField: "MenuSmallIcon", headerAlign: "center", dataAlign: "center",handler: "showIcon", width: "100"},
         {headerText: "排序", dataField: "MenuDisplayOrder", headerAlign: "center", dataAlign: "center", width: "100"},
        {headerText: "操作", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"}
      ],
      data: topData
    };

    /*
      单击数据行后触发该事件
      id：行的id
      index：行的索引。
      data：json格式的行数据对象。
    */
    function itemClickEvent(id, index, data){
      jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));
    }
    
    /*
      通过指定的方法来自定义栏数据
    */
    function customCheckBox(row, col){
      return "<input type='checkbox' value='"+ row.Id + "' name='ids' onclick='checkOne()'>";
    }

    function customOrgName(row, col){
      var name = row[col.dataField] || "";
      return name;
    }

    function showIcon(row, col){
      return "<i   class='"+row.MenuSmallIcon+"'></i>";
    }


    function customLook(row, col){
      return "<a href='javascript:void(0);' style='color:blue;'   onclick=goDelete(" + row.Id+ ") >删除</a>";
    }

    //创建一个组件对象
    var treeGrid = new TreeGrid(config);
    treeGrid.show();
       treeGrid.expandAll('N');
    
    /*
      展开、关闭所有节点。
      isOpen=Y表示展开，isOpen=N表示关闭
    */
    function expandAll(isOpen){
      treeGrid.expandAll(isOpen);
    }
    
    /*
      取得当前选中的行，方法返回TreeGridItem对象
    */
    function selectedItem(){
      var treeGridItem = treeGrid.getSelectedItem();
      if(treeGridItem!=null){
        //获取数据行属性值
        //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);
        
        //获取父数据行
        var parent = treeGridItem.getParent();
        if(parent!=null){
          //jQuery("#currentRow").val(parent.data.name);
        }
        
        //获取子数据行集
        var children = treeGridItem.getChildren();
        if(children!=null && children.length>0){
          jQuery("#currentRow").val(children[0].data.name);
        }
      }
    }







function checkOne(){
  var optIds = '';
  $("input[name='ids']:checkbox:checked").each(function(){ 
      optIds+=$(this).val() +',';
       });
   if(''!=optIds){
        optIds = optIds.substring(0,optIds.length-1);
      }
$('#optIds').val(optIds);

  console.log($('#optIds').val());
}







//单条删除
  function goDelete(id){
      top.layer.confirm('您确定删除吗', function(index){
              var postInfoUrl = API_URL+"menu_info";

          var infoUrl = API_URL+"menu_info?query=delflag:0,Id:"+id;

          var formData =  MY_ASYNC_AJAX(infoUrl)[0];

         formData.Delflag = "1";
   $.ajax({
      url : postInfoUrl+'/'+id,
      type : 'put',
      data: JSON.stringify(formData),
      cache : false,
      success : function(data) {

  // $('#div1').empty();

   console.log(  $('#div1'));


               top.layer.msg('删除成功');

      }
    });



 top.layer.close(index);
      });
  }




  </script>






    
    </div>



  </div>

</div>




<script type="text/javascript" >







//angularjs总控制器
app.controller('dataTablesCtrl', function($scope, $http,$state) {
//进入编辑页面
   $scope.goEdit = function () {
  var optIds = $('#optIds').val();
     if(''==optIds){
    top.layer.msg('请至少选择一项', {icon: 6});
       return false;
  }
  if(optIds.indexOf(",") != -1){
    top.layer.msg('编辑只能选择一项', {icon: 6});
    return false;
  }
        $state.go('app.menuInfo.menuInfoEdit', {infoId: optIds});
    };



//进入编辑页面
//进入编辑页面
   $scope.goRemove = function () {




 var optIds = $('#optIds').val();
     if(''==optIds){
    top.layer.msg('请至少选择一项', {icon: 6});
       return false;
    }

    top.layer.confirm('您确定删除这些信息吗', function(index){

    var postInfoUrl = API_URL+"menu_info";

    var optArrs = optIds.split(',');

    for(var i = 0;i< optArrs.length;i++ ){

         var infoUrl = API_URL+"menu_info?query=delflag:0,Id:"+optArrs[i];

          var formData =  MY_ASYNC_AJAX(infoUrl)[0];
         
          formData.Delflag = "0";

     $.ajax({
         url : postInfoUrl+'/'+id,
        type : 'put',
         data: JSON.stringify(formData),
       cache : false,
            success : function(data) { 
                  
                  }  
             }); 

        }
        top.layer.close(index);

        top.layer.msg('删除成功', {icon: 6});
                    //2.成功跳转页面
        var table = $('#myTable').DataTable();
       
        table.ajax.reload( null, false ); 

  });
      




    };
});




</script>